<template>
  <div class="card">
    <router-link class="pic"  to='/details'>
        <img :src="data.url" alt="">
    </router-link>
    <div class="bottom flex-r-b">
        <div class="text">
            <p class="ellipsis">{{data.name}}</p>
            <p class="price ellipsis">{{size}}</p>
        </div>
        <div class="add" @click.stop='showAdd'>
        </div>
    </div>
</div>
</template>

<script>
export default {
  components: {},
  props: ['data'],
  data() {
    return {};
  },
  created() {},
  mounted() {},
  computed: {
    size(){
      const data = this.data.data[0]
      let size = data.size.slice(0,2)
      return `${data.price}/${size}`
    }
  },
  methods: {
    showAdd(){
      this.$emit('showSize')
    }
  },
  watch: {}
};
</script>
<style lang="scss" scoped>
@import "../../public/sass/base.scss";
.card {
  width: 3.4rem;
  margin-top: 0.3rem;
  background: $c-fb;
  border-radius: $radius-10;
  overflow: hidden;
  font-family: $f-Medium;
  color: $c-33;
  &:nth-of-type(even) {
    margin-left: 0.18rem;
  }
  .pic {
    display: block;
    height: 3.4rem;
  }
  .bottom {
    padding: 0.2rem;
    .text {
      flex: 1;
      overflow: hidden;
      font-size: 0.26rem;
    }
    .add {
      width: 0.4rem;
      height: 0.4rem;
      border-radius: 0.2rem;
      background: url("../../public/images/index/iocn_3.png");
      background-size: 100% 100%;
    }
  }
}
</style>